<template>
  <div ref="container" class="w-p100 h-p100">
    <div v-if="josnData" ref="screen" class="screen-big">
      <div class="face-content w-p100 h-p100">
        <img class="face" :src="josnData.face_base64" alt="">
        <img class="sticker"
          :style="{
            width: item.w,
            'z-index': item.zIndex,
            '-webkit-transform': `translate3d(${item.translateObj.x}px, ${item.translateObj.y}px, 0) scale(${item.translateObj.scale}) rotate(${item.translateObj.rotate}deg)`
          }"
          :src="item.img"
          v-for="(item, index) in josnData.stickerList" :value="item" :key="index" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { stickerList } from '@/assets/js/constants'
import { getQueryString } from '@/assets/js/common'
export default {
  name: 'preview',
  computed: {
    ...mapState(['activityGuid'])
  },
  data () {
    return {
      josnData: null
    }
  },
  mounted () {
    this.ledscreenUserDataGet()
  },
  methods: {
    ledscreenUserDataGet () {
      let openid = getQueryString('openid') || this.$route.query.openid
      let id = getQueryString('id') || this.$route.query.id
      this.$http({
        url: `${this.$config.baseUrl}/api/api?ifname=ledscreen.user.data.get`,
        method: 'post',
        data: {
          activity_guid: this.activityGuid,
          openid,
          id
        }
      }).then(res => {
        if (+res.status === 1) {
          // console.log(res.message)
          this.josnData = res.message
          this.initStickerList(JSON.parse(res.message.json_data))
        } else {
          this.$tools.openToast({
            msg: '获取数据失败',
            duration: 3000
          })
        }
      })
    },
    initStickerList (josnData) {
      // console.log('josnData>>>', josnData)
      this.josnData = {
        face_base64: `http://items.ufunet.cn${josnData.face_base64}`
      }
      let zoom = document.body.clientWidth / josnData.screenObj.sW
      this.josnData.stickerList = josnData.screenObj.stickerList.map(item => {
        let img
        stickerList.forEach(item1 => {
          if (item1.code === item.code) {
            img = item1.img
          }
        })
        let { x, y, scale, rotate } = item.translateObj
        let stickerItem = {
          img,
          w: item.w,
          zIndex: item.zIndex,
          translateObj: {
            x: zoom * x,
            y: zoom * y,
            scale,
            rotate
          }
        }
        return stickerItem
      })
    },
    next () {
      this.$router.push({
        path: '/recommend'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 312*648
@keyframes message {
  15%{
    transform: translateY(0);
  }
  85%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(-100%);
  }
}
.message{
  width:90%;
  left:5%;
  position:absolute;
  z-index:5;
  transform: translateY(-100%);
  background-color:rgba(255,255,255,.8);
  height:1.5rem;
  border:.08rem solid #7fbeb9;
  border-top:0;
  border-bottom-right-radius: .5rem;
  border-bottom-left-radius: .5rem;
  animation: message 8s linear 2s;
  animation-fill-mode: forwards;
  font-size:.32rem;
  .head{
    margin-left:.3rem;
    margin-right:.3rem;
    width:1rem;
    height:1rem;
    border-radius:50%;
    background-color:#999;
  }
}
.screen-big{
  position:absolute;
  z-index:1;
  width:100%;
  height:100%;
  .face-content{
    position:relative;
    overflow:hidden;
    width:100%;
    height:100%;
    .face{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
    }
    .sticker{
      position:absolute;
    }
  }
}
.page{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.welcome{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2;
}
.welcome1,.welcome2,.logo,.welcome-button{
  position:absolute;
  z-index:2;
  animation-delay: 1s;
}
@keyframes welcome {
  to {
    transform:translate3d(0, 0, 0)
  }
}
.welcome1{
  right:0;
  top:-1.6rem;
  width:2.2rem;
  transform:translate3d(2.2rem, -2.2rem, 0);
  animation: welcome 1s linear 1s;
  animation-fill-mode: forwards;
}
.welcome2{
  left:0;
  top:3rem;
  width:1.88rem;
  animation: welcome 1s linear 1s;
  transform:translate3d(-2.2rem, 2.2rem, 0);
  animation-fill-mode: forwards;
}
.center{
  position:absolute;
  top:.7rem;
  left:50%;
  margin-left:-1.65rem;
  width:3.3rem;
  height:3.3rem;
}
.welcome3{
  left:0;
  top:0;
}
.welcome4{
  right:0;
  top:0;
}
.welcome5{
  left:0;
  bottom:0;
}
.welcome6{
  right:0;
  bottom:0;
}
.welcome3,.welcome4,.welcome5,.welcome6{
  z-index:2;
  position: absolute;
  width:1.6rem;
  height:1.6rem;
  animation-delay: 1s;
  animation-duration: 1.5s;
}
.code{
  position: absolute;
  width:3rem;
  height:3rem;
  top:26%;
  left:50%;
  margin-left:-1.5rem;
  animation-delay: 1s;
}
.line{
  position:absolute;
  bottom:30.555%;
  z-index:99999;
  width:100%;
  border-bottom:1px solid #FFF;
}
.bottom{
  position:absolute;
  bottom:0;
  left:0;
  z-index:3;
  width:100%;
  height:4.2rem;
  background-color:#56d1c8;
  animation-delay: 2s;
}
.trapezoid1{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  width:2rem;
  height:0;
  border-width:0 2rem 4.2rem 2rem;
  border-style:none solid solid;
  border-color:transparent transparent #ffe869;
}
.trapezoid2{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  height:0;
  width:1.8rem;
  border-width:0 2rem 4.2rem 2rem;
  // border-width:0 1rem 1.8rem 1rem;
  border-style:none solid solid;
  border-color:transparent transparent #ffab6c;
}
.logo{
  position:absolute;
  width:1.2rem;
  display:block;
  left:50%;
  margin-left:-.6rem;
  bottom:25%;
}
.screen-title{
  width:3.2rem;
  position:absolute;
  display:block;
  left:50%;
  margin-left:-1.6rem;
  bottom:51.5%;
  animation-delay:1.8s;
}
// 312*648
.screen{
  position:absolute;
  bottom:82%;
  left:50%;
  transform: translateX(-50%);
  border:.1rem solid #FFF;
  width:2.1rem;
  height:4.36154rem;
  z-index:1;
  .head-list{
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
    left:0;
    top:0;
  }
  img{
    position: absolute;
    bottom:0;
    width:100%;
  }
}
.fade1-enter-active, .fade1-leave-active {
  transition: opacity 2s
}
.fade1-enter, .fade1-leave-to {
  opacity: .33
}
</style>
